<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮件模板</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }

        /* 头部css样式 */
        .header{
            height: 80px;
            background-color: rgb(0,188,213);
            padding: 20px;
        }
        .HeaderCon{
            width: 1000px;
            margin: auto;
            padding-left: 60px;
            padding-right: 60px;
        }
        .HeaderLeft{
            display: inline-block;
            width: 60%;
        }
        .HeaderLeft img{
            height: 40px;
            border-radius: 50%;
            vertical-align:middle;
            margin-right: 15px;
        }
        .user{
            font-weight: 600;
            font-size: 20px;
            color: rgb(153,223,235);
            position: relative;
            top: 4px;
        }
        .UserTest{
            display: inline-block;
            float: right;
        }
        .UserTest a{
            font-weight: 600;
            font-size: 16px;
            color: rgb(153,223,235);
            position: relative;
            top: 10px;
        }
        .UserTest a:hover{
            color: aliceblue;
        }


        /* 主体css样式 */
        .Sec{
            width: 1000px;
            margin: auto;
            padding: 20px;
            padding-top: 60px;
        }
        .EmailBody{
            padding: 40px;
        }
        .TipText{
            font-weight: 600;
            margin-bottom: 15px;
        }
        .TipText:nth-child(1){
            margin-bottom: 30px;
        }
        .TipText span{
            color: rgb(100,206,225);
        }
        .TipText:nth-child(2) span,.TipText:nth-child(3) span{
            margin-left: 25px;
        }

        /* 公司信息 */
        .CompanyInfo{
            background-color: rgb(249,250,252);
            padding: 20px 60px;
            margin-top: 40px;
            margin-bottom: 25px;
        }

        .HrLine{
            margin-top: 30px;
            margin-bottom: 30px;
            height: 2px;
            color: yellow;
        }

        .InfoP{
            font-weight: 600;
            margin-bottom: 15px;
        }
        .InfoP span:nth-child(1){
            display: inline-block;
            width: 120px;
            text-align: right;
        }
        .InfoP span:nth-child(2){
            color: rgb(100,206,225);
            margin-left: 25px;
        }
        /* 二维码和一些啥 */
        .AnotherInfo{
            padding: 0 40px 22px 40px;
        }
        .AInfoLeft{
            display: inline-block;
            width: 60%;
        }
        .AInfoLeft p{
            color: rgb(100,206,225);
            margin-bottom: 15px;
        }
        .Timg{
            height: 116px;
            float: right;
            position: relative;
            top: -20px;
        }

        /* 底部样式 */
        .Fo{
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 600;
            background-color: rgb(101,104,113);
            margin-top: 20px;
            color: white;
        }
    </style>
</head>
<body>
<div id="box">
    <!-- 头部 -->
    <header class="header">
        <div class="HeaderCon">
            <!-- 头部左边logo -->
            <div class="HeaderLeft">
                <!-- 这里是LOGO -->
                <img src="cid:logoImage" alt="">
                <span class="user">邮件发送模板</span>
            </div>

            <!-- 头部右边，用户申请 -->
            <span class="UserTest">
        <a href="javascript:;">邮件发送模板测试</a>
    </span>
        </div>

    </header>
    <!-- 中部 -->
    <section class="Sec">
        <!-- 邮件标题 -->
        <h1 style="padding-left: 40px" th:text="${name} + '，您好！'"></h1>
        <!-- 邮件主题 -->
        <div class="EmailBody">
            <!-- 这里是一些提示信息 -->
            <p class="TipText">这是一封邮件模板，根据该模板进行发送邮件测试</p>
            <p class="TipText">测试开始时间:<span>2017年3月33日</span> <span>上午9:30:21</span></p>
            <p class="TipText">测试完成时间:<span>2017年3月33日</span> <span>上午9:30:21</span></p>

            <!-- 这里是公司信息 -->
            <div class="CompanyInfo">
                <p class="InfoP"><span>组织单位名称:</span> <span>四川省成都市</span></p>
                <p class="InfoP"><span>组织单位地址:</span> <span>四川省成都市XXX</span></p>
                <p class="InfoP"><span>联系人:</span> <span>kimewen</span></p>
                <p class="InfoP"><span>办公电话:</span> <span>010-1000000</span></p>
                <p class="InfoP"><span>手机号码:</span> <span>199999999999</span></p>
                <hr class="HrLine">
                <p class="InfoP"><span>Email:</span> <span>kimewen@163.com</span></p>
                <p class="InfoP"><span>备注:</span> <span>jiangyi</span></p>
            </div>
        </div>

        <!-- 下面是二维码and一些消息 -->

        <div class="AnotherInfo">
            <div class="AInfoLeft">
                <p>邮件发送模板</p>
                <p>有问题请扫描右侧二维码</p>
            </div>
            <img src="cid:TimgImage" alt="" class="Timg">
        </div>
    </section>
    <!-- 底部 -->
    <footer class="Fo">
        @110版权归XXX所有
    </footer>
</div>
</body>
</html>